<template>
  <div class="z-markdown-header">
    <div class="z-markdown-header-left">
      <div class="z-markdown-header-left-title">
        {{ currentFilePath ?? "untitled.md" }}
        <span v-if="dirty">*</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { currentFilePath, dirty } = defineProps<{
  currentFilePath: string | null;
  dirty: boolean;
}>();
</script>

<style scoped>
.z-markdown-header {
  height: 60px;
  padding: 0 12px;
  background-color: #f5f5f5;

  .z-markdown-header-left {
    height: 100%;
    display: flex;
    align-items: center;
    .z-markdown-header-left-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      span {
        color: #ff4d4f;
      }
    }
  }
}
</style>
